<script setup>
import { ref, onMounted } from 'vue'
import { articleList } from '@/api/article'
import ArticleItem from '@/components/ArticleItem.vue'
import { showToast } from 'vant'
import router from '@/router';

const articles = ref([])
const loading = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)

const loadArticles = async () => {
  try {
    loading.value = true
    const res = await articleList(pageNum.value, pageSize.value)
    if (res.data.list.length === 0) {
      finished.value = true
    } else {
      articles.value.push(...res.data.list)
      pageNum.value++
    }
  } catch (error) {
    showToast('加载失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadArticles()
})
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="address">
        北京&nbsp;<van-icon name="arrow-down" />
      </div>
      <div class="search">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
          background="transparent"
        >
          <template #right-icon>
            <div class="search-btn">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="code">
        <van-icon name="qr" size="20" />
      </div>
      <div class="more">
        <van-icon name="ellipsis" size="20" />
      </div>
    </div>
    <div class="menu">
        <div class="menu-item" @click="router.push('/scenic')">
            <img src="../assets/attraction.png" alt="">
            <span>景区</span>
        </div>
        <div class="menu-item" @click="$router.push('/accompany')">
            <img src="../assets/accompany.png" alt="">
            <span>结伴</span>
        </div>
        <div class="menu-item" @click="$router.push('/friend-circle')">
            <img src="../assets/friend.png" alt="">
            <span>朋友圈</span>
        </div>
        <div class="menu-item" @click="$router.push('/strategy')">
            <img src="../assets/youji.png" alt="">
            <span>游记</span>
        </div>
        <div class="menu-item" @click="$router.push('/notes')">
            <img src="../assets/gonglue.png" alt="">
            <span>攻略</span>
        </div>
        <div class="menu-item">
            <img src="../assets/shop.png" alt="">
            <span>商城</span>
        </div>
        <div class="menu-item" @click="$router.push('/points')">
            <img src="../assets/sign.png" alt="">
            <span>积分</span>
        </div>
        <div class="menu-item" @click="$router.push('/parse')">
            <img src="../assets/video.png" alt="">
            <span>解析</span>
        </div>
        <div class="menu-item" @click="$router.push('/ai')">
            <img src="../assets/ai.png" alt="">
            <span>ai问答</span>
        </div>
        <div class="menu-item" @click="$router.push('/admin')">
            <img src="../assets/admin.png" alt="">
            <span>后台</span>
        </div>
        
    </div>
    <div class="hot">
        <div class="hot-item">
            <span>热度榜</span>
        </div>
        <div class="hot-item" @click="$router.push('/rank')">
            <span>发文榜</span>
        </div>
        <div class="hot-item">
            <span>邀请榜</span>
        </div>
        <div class="hot-item">
            <span>积分榜</span>
        </div>
    </div>
    <div class="tab">
        <div class="tab-item" v-for = "item in tabList" :class="{'active': activeTab === index}" @click="activeTab = index">
            <span>{{ item }}</span>
        </div>
    </div>
    <div class="content">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadArticles"
      >
        <div class="article-list">
          <ArticleItem
            v-for="article in articles"
            :key="article.id"
            :article="article"
          />
        </div>
      </van-list>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    .address {
      flex: none;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
    }
    .search {
      flex: 1;
      margin: 0 10px;
      :deep(.van-search) {
        padding: 0;
        
      }
      :deep(.van-search__content) {
        background-color: #f5f5f5;
      }
    }
    .code{
        margin-right: 10px;
    }
  }
  .menu{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
    margin-top: 50px;
    .menu-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        border-radius: 10px;
        width: calc((100% - 40px) / 5);
        box-sizing: border-box;
        span {
          margin-top: 5px;
          color: black;
          font-size: 14px;
        }
        img{
            width: 30px;
            height: 30px;
        }
    }
  }
  .hot{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: linear-gradient(to right, #40E0D0, #EE82EE);
    margin: 10px;
    border-radius: 12px;
    .hot-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 15px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      backdrop-filter: blur(5px);
      transition: all 0.3s ease;
      
      span {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
      }

      &:active {
        transform: scale(0.95);
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
  .tab{
    position: sticky;
    top: 50px;
    z-index: 1000;
    padding: 10px 10px 10px 10px;
    background-color: #fff;
    display: flex;
    .tab-item{
        display: flex;
        border-radius: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        font-weight: 600;
    }
  }
}
.search-btn{
    color: #fff;
    background-color: #FF653F;
    padding: 5px 10px;
    border-radius: 10px;
}
.content {
  padding: 10px;
  margin-bottom: 60px;
  .article-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
</style>